import { createBrowserRouter } from "react-router-dom";
import Layout from "../layout";
import { lazy, Suspense } from "react";

const Home = lazy(() => import('../pages/home'))
const List = lazy(() => import('../pages/list'))
const My = lazy(() => import('../pages/my'))
const Order = lazy(() => import('../pages/order'))
const Role = lazy(() => import('../pages/role'))
const Chat = lazy(() => import('../pages/chat'))
const Login = lazy(() => import('../pages/login'))
const Register = lazy(() => import('../pages/register'))


function withSuspense(Component) {
    return (
        <Suspense fallback={<h3>Loading.....</h3>}>
            <Component />
        </Suspense>
    )
}

const routes = [
    {
        path: '/',
        element: withSuspense(Login)
    },
    {
        path: '/register',
        element: withSuspense(Register)
    },
    {
        path: '/main',
        element: <Layout />,
        children: [
            {
                index: true,
                name: "主页",
                element: withSuspense(Home)

            }, {
                path: 'list',
                element: withSuspense(List)

            }, {
                path: 'my',
                element: withSuspense(My)

            }, {
                path: 'order',
                element: withSuspense(Order)

            }, {
                path: 'role',
                element: withSuspense(Role)

            }, {
                path: 'chat',
                element: withSuspense(Chat)

            },

        ],

    }
];

const router = createBrowserRouter(routes);

export default router;